﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="KPIAssignDetailPage.aspx.cs" Inherits="FBKPI.Pages.KPIAssignDetailPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <script type="text/javascript">
        var oTable;
        var oTable2;
        var oTable3;

        
        $(document).ready(function () {
            $("#divBrowseSuperior").hide();
            $("#divBrowseSuperior").dialog({ autoOpen: false, width: 900, height: 500, modal: true, resizable: false });

            //browse superior
            $("#btn_BrowseSuperior").click(function () {

                return false;
            });

            PickSuperior = function (SuperiorID, SuperiorName) {
                $("#txt_superior").val(SuperiorName);
                $("#txt_superiorid").val(SuperiorID);
                $("#divBrowseSuperior").dialog("close");
            }
            //end browse superior


            mainmenu("#nav ul", "#nav li");
            mainmenu("#menu_wrap ul", "#menu_wrap li");

            $("#tabs").tabs();

            $("#divdetail").hide();
            $("#divdetail").dialog({
                title: '<span class="header-text">KPI Assign Detail Form</span>',
                autoOpen: false,
                width: 800,
                height: 500,
                modal: true,
                resizable: false
            });


            //datatable section
            oTable = $("#KPITable").dataTable({
                "oLanguage": {
                    "sZeroRecords": "No records to display",
                    "sSearch": "Search"
                },
                "bSort": true,
                "bPaginate": true,
                "bAutoWidth": false,
                "bProcessing": true,
                "bServerSide": true,
                "bDestroy": true,
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "bDeferRender": true,
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        "dataType": 'json',
                        "type": "GET",
                        "url": "../Serializer/KPIAssignDetailSerializer.ashx?User=" + $("#txt_user").val() + "&Year=" + $("#txt_selectyear").val(),
                        "data": aoData,
                        "success": fnCallback
                    });
                },
                "aoColumns": [
                //                {
                //                    "mData": "KPIParent"
                //            },
             {
             "mData": "ID", "sWidth": "3%"
         }
            , {
                "mData": "No", "sWidth": "3%"
            }, {
                "mData": "Description"
            }
            , {
                "mData": "AssignedEmployee"
            }, {
                "mData": "GroupKPI"
            }, {
                "mData": "CategoryKPI"
            }, {
                "mData": "TypeKPI"
            }, {
                "mData": "SubTypeKPI"
            }, {
                "mData": "Periode"
            }, {
                "mData": "Weight", "sWidth": "5%"
            },
             {
                 "mData": "UoMMax"
             },
                {
                    "mData": "UoMMin"
                }

                , {
                    "mData": "isActive", "sWidth": "8%"
                }

            ],
                "aoColumnDefs": [

                //            {
                //                "fnRender": function (oObj) {
                //                    return "<img src='../images/plus.gif' class='imagetree'/>";
                //                },
                //                "aTargets": [0]
                //            },

            {



            "fnRender": function (oObj) {
                return "<a href=\"#\" onclick=\"DirectTo('" + oObj.aData["ID"] + "', '" + $("#txt_user").val() + "')\"><img src='../images/detail.png' /></a>";
            },
            "aTargets": [0]
        },
        {
            "fnRender": function (oObj) {
                if (oObj.aData["AssignedEmployee"] != '') {
                    return "<a href='#' onclick='ShowEmployee(" + oObj.aData["ID2"] + ")'>" + oObj.aData["AssignedEmployee"].toString() + "</a>";
                }
                else {
                    return "";
                }
            },
            "aTargets": [3]
        },
        {
            "fnRender": function (oObj) {
                if (oObj.aData["isActive"] == 'True') {
                    return "<img src='../images/check.png' />"
                } else {
                    return "<img src='../images/cross.png' />"
                }
            },
            "aTargets": [12]
        },

        {
            "bVisible": false,
            "aTargets": [4,5, 6, 7]
        },

        {
            "sClass": "center",
            "aTargets": [1,  9, 12]
        }]
            });

            //mark selected row
            $('body').on("click", '#KPITable tbody tr', function () {
                $('#KPITable tbody tr').removeClass("row_selected");
                $(this).addClass("row_selected");
            });
            //--------------------end of mark selected row-----------------------------
            //$("#KPITable_filter label").after('&nbsp;KPI Year: <input id=\"txt_selectyear\" oninput=\'GetList($(this).val());\' type=\"text\" \>');
            //--------------------end of datatable section-----------------------------------------

            DirectTo = function (KPIID, user) {
                document.location = "../Pages/InputKPIAssignDetailPage.aspx?User=" + user + "&KPI=" + KPIID + "&KPIAssignDetail=0";
                return false;
            }


            ShowEmployee = function (KpiID) {
                $("#divBrowseSuperior").dialog("option", "title", '<span class="header-text">Assigned Employee</span>');
                $("#divBrowseSuperior").dialog("open");
                $('#superior').dataTable({
                    "oLanguage": {
                        "sZeroRecords": "No records to display",
                        "sSearch": "Search"
                    },
                    "bSort": true,
                    "bPaginate": true,
                    "bAutoWidth": false,
                    "bProcessing": true,
                    "bServerSide": true,
                    "bDestroy": true,
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers",
                    "bDeferRender": true,
                    "fnServerData": function (sSource, aoData, fnCallback) {
                        $.ajax({
                            "dataType": 'json',
                            "type": "GET",
                            "url": "../Serializer/EmployeeByKPIAssignDtlSerializer.ashx?KpiID=" +KpiID,
                            "data": aoData,
                            "success": fnCallback
                        });
                    },
                    "aoColumns": [
                        { "mData": "No" },
                        { "mData": "Lokasi" },
                        { "mData": "Nama" },
                        { "mData": "Departemen" },
                        { "mData": "Section" },
                        { "mData": "SubSection" },
                        { "mData": "Jabatan" }


                    ],
                    "aoColumnDefs":
                    [

                    ]
                });

                //mark selected row
                $('body').on("click", '#superior tbody tr', function () {
                    $('#superior tbody tr').removeClass("row_selected");
                    $(this).addClass("row_selected");
                });
                $(".dataTables_filter input").focus();

                return false;
            }



            //datatable section
            oTable2 = $("#AssignedTable").dataTable({
                "oLanguage": {
                    "sZeroRecords": "No records to display",
                    "sSearch": "Search"
                },
                "bSort": true,
                "bPaginate": true,
                "bAutoWidth": false,
                "bProcessing": true,
                "bServerSide": true,
                "bDestroy": true,
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "bDeferRender": true,
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        "dataType": 'json',
                        "type": "GET",
                        "url": "../Serializer/KPIAssignedListSerializer.ashx?User=" + $("#txt_user").val() + "&Year=" + $("#txt_selectyear2").val(),
                        "data": aoData,
                        "success": fnCallback
                    });
                },
                "aoColumns": [{
                    "mData": "Employee"
                }, {
                    "mData": "No", "sWidth": "2%"
                }, {
                    "mData": "Description"
                }, {
                    "mData": "KPIParent"
                }, {
                    "mData": "GroupKPI"
                }, {
                    "mData": "CategoryKPI"
                }, {
                    "mData": "TypeKPI"
                }, {
                    "mData": "SubTypeKPI"
                },
                 {
                     "mData": "Weight"
                 },
                {
                    "mData": "UoMMax"
                },
                {
                    "mData": "UoMMin"
                },

                {
                    "mData": "AssignBy"
                },
                 {
                     "mData": "Mandatory", "sWidth": "8%"
                 },
                {
                    "mData": "isActive", "sWidth": "8%"
                },
                 {
                     "mData": "ID", "sWidth": "8%"
                 }
                ],
                "aoColumnDefs": [
                {
                "fnRender": function (oObj) {
                    //return "<a href=\"#\" onclick=\"DirectToAssign('" + oObj.aData["ID"] + "', '" + $("#txt_user").val() + "')\">view</a>/<a href='#' onclick='OnDelete('" + oObj.aData["ID"] + "')'>unsign</a>";
                    return "<a href=\"#\" onclick=\"OnUnSign('" + oObj.aData["ID"] + "', '" + oObj.aData["EmployeeID"] + "')\"><img src='../images/icon_delete.png' title='Un Sign' /></a>";
                },

                "aTargets": [14]
            },

             {
                 "fnRender": function (oObj) {
                     if (oObj.aData["Mandatory"] == 'True') {
                         return "<img src='../images/check.png' />"
                     } else {
                         return "<img src='../images/cross.png' />"
                     }
                 },
                 "aTargets": [12]
             },

                {
                    "fnRender": function (oObj) {
                        if (oObj.aData["isActive"] == 'True') {
                            return "<img src='../images/check.png' />"
                        } else {
                            return "<img src='../images/cross.png' />"
                        }
                    },
                    "aTargets": [13]
                },
                 {
                     "bVisible": false,
                     "aTargets": [ 3,4,5, 6,7]
                 },
                 {
                     "sClass": "center",
                     "aTargets": [1,13,12,8,14]
                 }]
        }).rowGrouping({
            iGroupingColumnIndex: 0,
            bExpandableGrouping: true,
            bHideGroupingColumn: true


        });

        //mark selected row
        $('body').on("click", '#AssignedTable tbody tr', function () {
            $('#AssignedTable tbody tr').removeClass("row_selected");
            $(this).addClass("row_selected");
        });
        //--------------------end of mark selected row-----------------------------
        //$("#AssignedTable_filter label").after('&nbsp;KPI Year: <input id=\"txt_selectyear2\" oninput=\'GetList2($(this).val());\' type=\"text\" \>');
        //--------------------end of datatable section-----------------------------------------


        //datatable section
        oTable3 = $("#KPITable2").dataTable({
            "oLanguage": {
                "sZeroRecords": "No records to display",
                "sSearch": "Search"
            },
            "bSort": true,
            "bPaginate": true,
            "bAutoWidth": false,
            "bProcessing": true,
            "bServerSide": true,
            "bDestroy": true,
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "bDeferRender": true,
            "fnServerData": function (sSource, aoData, fnCallback) {
                $.ajax({
                    "dataType": 'json',
                    "type": "GET",
                    "url": "../Serializer/AvailableKPIUnSignSerializer.ashx?User=" + $("#txt_user").val() + "&Year=" + $("#txt_selectyear").val(),
                    "data": aoData,
                    "success": fnCallback
                });
            },
            "aoColumns": [{
                "mData": "No", "sWidth": "3%"
            }, {
                "mData": "Description"
            }, {
                "mData": "GroupKPI"
            }, {
                "mData": "CategoryKPI"
            }, {
                "mData": "TypeKPI"
            }, {
                "mData": "SubTypeKPI"
            }, {
                "mData": "Periode"
            }, {
                "mData": "Weight", "sWidth": "8%"
            },

             {
                 "mData": "UoMMax"
             },
             {
                    "mData": "UoMMin"
            },

            {
                "mData": "isActive", "sWidth": "8%"
            }
            ,{
                "mData": "ID", "sWidth": "5%"
            }],
            "aoColumnDefs": [{
                "fnRender": function (oObj) {
                    return "<a href=\"#\" onclick=\"PickKPI('" + oObj.aData["ID"] + "','pick')\"><img src='../images/thumbup.png' /></a>";
                },
                "aTargets": [11]
            }, {
                "fnRender": function (oObj) {
                    if (oObj.aData["isActive"] == 'True') {
                        return "<img src='../images/check.png' />"
                    } else {
                        return "<img src='../images/cross.png' />"
                    }
                },
                "aTargets": [10]
            },
            {
                "bVisible": false,
                "aTargets": [2, 3, 4, 5, 6]
            },
            
             {
                "sClass": "center",
                "aTargets": [0,7,10,11]
            }]
        });

        //mark selected row
        $('body').on("click", '#KPITable tbody tr', function () {
            $('#KPITable2 tbody tr').removeClass("row_selected");
            $(this).addClass("row_selected");
        });
        //--------------------end of mark selected row-----------------------------
        //$("#KPITable2_filter label").after('&nbsp;KPI Year: <input id=\"txt_selectyear\" oninput=\'GetList($(this).val());\' type=\"text\" \>');
        //--------------------end of datatable section-----------------------------------------

        DirectToAssign = function (KPIID, user) {
            document.location = "../Pages/InputKPIAssignDetailPage.aspx?User=" + user + "&KPI=0&KPIAssignDetail=" + KPIID;
            return false;
        }

        OnUnSign = function (code, employeeID) {

            $.msgBox.confirm("Benar data akan di unsign ?", function () {
                //                var param = "?";
                //                param = param + "action=unsign";
                //                param = param + "&KpiID=" + code;
                //                param = param + "&CurrUser=" + $("#txt_user").val();
                //                param = param + "&EmployeeID=" + employeeID;
                //                ProcessRequest("KPIAssignDetailHandler.ashx" + param, "#divdetail", "#KPITable");
                //                return false;

                $.ajax({ url: '../ProcessRequest/KPIAssignDetailHandler.ashx?CurrUser=' + $("#txt_user").val() + '&action=unsign' + '&KpiID=' + code + "&EmployeeID=" + employeeID, type: "POST",
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert(xhr.responseText);
                    },
                    success: function (data) {
                        //GetSummary();
                        alert(data);
                        oTable.fnDraw();
                        oTable2.fnDraw();
                        oTable3.fnDraw();

                        return false;
                    }
                });
                return false;

            }, false);


            return false;
        }

        GetList = function (value) {
            if (value.length > 0) {
                var xx = '0123456789';
                if (xx.indexOf(value[value.length - 1]) < 0) {
                    $("#txt_selectyear").val(value.toString().replace(value[value.length - 1], ''));
                }

                if (value.length == 4) {
                    oTable.fnDraw();
                }
            }
            else
            { oTable.fnDraw(); }
        }

        GetList2 = function (value) {
            if (value.length > 0) {
                var xx = '0123456789';
                if (xx.indexOf(value[value.length - 1]) < 0) {
                    $("#txt_selectyear2").val(value.toString().replace(value[value.length - 1], ''));
                }

                if (value.length == 4) {
                    oTable2.fnDraw();
                }
            }
            else
            { oTable2.fnDraw(); }
        }


        PickKPI = function (code, mode) {
            if (mode == 'pick') {
                if (confirm('Are you sure to pick this KPI?')) {
                    $.ajax({ url: '../ProcessRequest/PickAvailableKPIUnSignHandler.ashx?User=' + $("#txt_user").val() + '&KPI=' + code + "&action=" + mode, type: "POST",
                        error: function (xhr, ajaxOptions, thrownError) {
                            alert(xhr.responseText);
                        },
                        success: function (data) {
                            //GetSummary();
                            alert(data);
                            oTable.fnDraw();
                            oTable2.fnDraw();
                            oTable3.fnDraw();
                            return false;
                        }
                    });
                    return false;
                }
            }
            else {
                if (confirm('Are you sure to unpick this KPI?')) {
                    $.ajax({ url: '../ProcessRequest/PickAvailableKPIHandler.ashx?User=' + $("#txt_user").val() + '&KPI=' + code + "&action=" + mode, type: "POST",
                        error: function (xhr, ajaxOptions, thrownError) {
                            alert(xhr.responseText);
                        },
                        success: function (data) {
                            GetSummary();
                            alert(data);
                            oTable.fnDraw();
                            oTable2.fnDraw();
                            return false;
                        }
                    });
                    return false;
                }
            }
        }


    });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div style="height: 525px; overflow: auto;">
        <div id="kpitable">
            <div class="customPageHeader">
                <span class="customPageTitle">Assign KPI</span>
            </div>
            <div id="tabs">
                <ul>
                    <li><a href="#tabs-1">ASSIGN KPI</a></li>
                    <li><a href="#tabs-2">ASSIGNED KPI</a></li>
                    <li><a href="#tabs-3">AVAILABLE KPI</a></li>
                </ul>
                <div id="tabs-1">
                    <div>
                        <table cellpadding="0" cellspacing="0" class="display" id="KPITable">
                            <thead>
                                <tr>
                                    <%--<th>
                                </th>--%>
                                    <th>
                                    </th>
                                    <th>
                                        No
                                    </th>
                                    <th>
                                        KPI Description
                                    </th>
                                   
                                    <th>
                                        Assigned Employee
                                    </th>
                                    <th>
                                        Group
                                    </th>
                                    <th>
                                        Category
                                    </th>
                                    <th>
                                        Type
                                    </th>
                                    <th>
                                        Sub Type
                                    </th>
                                    <th>
                                        Periode
                                    </th>
                                    <th>
                                        Weight
                                    </th>
                                    <th>
                                        UoM Max.
                                    </th>
                                    <th>
                                        UoM Min.
                                    </th>
                                     <th>
                                        is Active
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div id="tabs-2">
                    <div>
                        <table cellpadding="0" cellspacing="0" class="display" id="AssignedTable">
                            <thead>
                                <tr>
                                    <th>
                                        Employee
                                    </th>
                                    <th>
                                        No
                                    </th>
                                    <th>
                                        KPI Description
                                    </th>
                                   
                                    <th>
                                        KPI Parent
                                    </th>
                                    <th>
                                        Group
                                    </th>
                                    <th>
                                        Category
                                    </th>
                                    <th>
                                        Type
                                    </th>
                                    <th>
                                        Sub Type
                                    </th>
                                    <th>
                                        Weight
                                    </th>
                                    <th>
                                        UoM Max.
                                    </th>
                                    <th>
                                        UoM Min.
                                    </th>
                                   
                                    <th>
                                        Assign By
                                    </th>
                                     <th>
                                        Mandatory
                                    </th>
                                      <th>
                                        is Active
                                    </th>

                                    <th>
                                    UnSign
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div id="tabs-3">
                    <div>
                        <table cellpadding="0" cellspacing="0" class="display" id="KPITable2">
                            <thead>
                                <tr>
                                    <th>
                                        No
                                    </th>
                                    <th>
                                        KPI Description
                                    </th>
                                    
                                    <th>
                                        Group
                                    </th>
                                    <th>
                                        Category
                                    </th>
                                    <th>
                                        Type
                                    </th>
                                    <th>
                                        Sub Type
                                    </th>
                                    <th>
                                        Periode
                                    </th>
                                    <th>
                                        Weight
                                    </th>
                                    <th>
                                        UoM Max.
                                    </th>
                                    <th>
                                        UoM Min.
                                    </th>
                                    <th>
                                        is Active
                                    </th>
                                    <th>
                                    Pick
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <br />
        </div>
        <div id="divdetail">
        </div>
    </div>
    <div id="divBrowseSuperior" class="ui-widget-content padding5px ui-corner-all">
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="superior">
            <thead>
                <tr>
                    <th>
                        No
                    </th>
                    <th>
                        Lokasi
                    </th>
                    <th>
                        Nama
                    </th>
                    <th>
                       Departemen 
                    </th>
                    <th>
                       Section 
                    </th>
                     <th>
                       Sub Section 
                    </th>
                    <th>
                        Jabatan
                    </th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</asp:Content>
